@charset "utf-8";

*{
  margin:0;
  padding:0;
  list-style-type:none;
}

a{
  color:black;
  text-decoration: none;
}

html,body{
  width:100%;
  height:100%;
}

input::-webkit-input-placeholder{
  color: #a9a9a9;
}


header{
  height:1.8rem;
  line-height:1.8rem;
  margin:0.4rem 0.6rem;
  display:flex;
  justify-content: space-between;
  &>div{
    font-size:0.9rem;
    &>a{
      &>img{
        width:0.45rem;
        height:0.7rem;
      }
    }
  }
}

article{
  width:100%;
  &>ul{
    width:14.5rem;
    margin:0.7rem auto;
    &>li{
      width:100%;
      height:2.15rem;
      line-height:2.15rem;
      display:flex;
      justify-content: space-between;
      &>div{
        &>input{
          padding-left:0.35rem;
          font-size:0.7rem;
          width:12rem;
          height:100%;
        }
      }
      &>a{
        display:inline-block;
        width:100%;
        height:2.2rem;
        margin-top:1.5rem;
        text-align:center;
        background-color: #ffc52f;
        border-radius:1.2rem;
        border:none;
        color:white;
        font-size:0.75rem;
      }
      &:nth-of-type(1){
        &>h2{
          font-size:0.9rem;
          font-weight: 200;
        }
      }
      &:nth-of-type(2){
        border-bottom:1px solid #ffe497;
        margin-top:0.3rem;
        &>img{
          &:nth-of-type(1){
            width:0.6rem;
            height:0.75rem;
            margin-top:0.675rem;
          }
          &:nth-of-type(2){
            width:1rem;
            height:0.8rem;
            margin-top:0.675rem;
          }
        }
        &>span{
          display:inline-block;
          width:1.15rem;
          height:1.15rem;
          text-align:center;
          line-height:1.15rem;
          border:2px solid red;
          border-radius:50%;
          font-size:0.5rem;
          color:#fe5b5e;
          margin-top:0.4rem;
        }
      }
    }
  }
  &>div{
    width:100%;
    height:28.45rem;
    background-color:rgba(0, 0, 0,0.6);
    z-index:888;
    position:absolute;
    top:0;
    display:none;
    &>div{
      width:11.225rem;
      height:6.15rem;
      background-color:white;
      border-radius:0.6rem;
      margin:8.6rem auto;
      text-align:center;
      font-size:0.8rem;
      position:relative;
      overflow:hidden;
      &>p{
        font-size:0.75rem;
        margin-top:2rem;
      }
      &>div{
        width:100%;
        display:flex;
        position:absolute;
        bottom:0;
        &>div{
          width:50%;
          height:1.6rem;
          background-color:#ffd974;
          &>a{
            color:white;
            line-height:1.6rem;
          }
        }
      }
    }
  }
}

